<template>
    <!-- <nav > -->
    <el-menu :default-active="defaultActive" unique-opened menu-trigger="click" :collapse="isCollapse" class="z-nav-menu">
        <div class="btns">
            <el-button type="success" @click="isCollapse = false" v-if="isCollapse" icon="el-icon-caret-right" size="medium"></el-button>
            <el-button type="warning" @click="isCollapse = true" v-else icon="el-icon-caret-left" size="medium"></el-button>
        </div>
        <template v-for="lev1 in menuData">
            <el-submenu v-if="lev1.type === 'menu_dir'" :index="lev1.name" :key="lev1.id">
                <template slot="title">
                    <i :class="lev1.icon"></i>
                    <span>{{ lev1.title }}</span>
                </template>
                <template v-for="lev2 in lev1.children">
                    <el-submenu v-if="lev2.type === 'menu_dir'" :index="lev2.name" :key="lev2.id">
                        <template slot="title">
                            <i :class="lev2.icon"></i>
                            <span>{{ lev2.title }}</span>
                        </template>
                        <template v-for="lev3 in lev2.children">
                            <el-menu-item v-if="lev3.type === 'menu'" :key="lev3.id" :index="lev3.path" @click="onSelect(lev3)">
                                <i :class="lev3.icon"></i>
                                <span slot="title">{{ lev3.title }}</span>
                            </el-menu-item>
                        </template>
                    </el-submenu>
                    <el-menu-item v-else-if="lev2.type === 'menu'" :key="lev2.id" :index="lev2.path" @click="onSelect(lev2)">
                        <i :class="lev2.icon"></i>
                        <span slot="title">{{ lev2.title }}</span>
                    </el-menu-item>
                </template>
            </el-submenu>
            <el-menu-item v-else-if="lev1.type === 'menu'" :key="lev1.id" :index="lev1.path" @click="onSelect(lev1)">
                <i :class="lev1.icon"></i>
                <span slot="title">{{ lev1.title }}</span>
            </el-menu-item>
        </template>
    </el-menu>
    <!-- </nav> -->
</template>

<script>
import { post } from "@/assets/js/http.js";

export default {
    name: "z-nav-menu",
    data() {
        return {
            menuData: [],
            defaultActive: "",
            isCollapse: true
        };
    },
    mounted() {
        this.$root.$on("update-menu", () => {
            this.getMenuData();
        });
        this.getMenuData();
    },
    watch: {
        $route() {
            this.updateDefaultActive();
        }
    },
    methods: {
        async getMenuData() {
            const data = await post({
                url: "/admin/index/index",
                loading: true
            });
            this.menuData = data.menus;
            this.$store.commit("setAdminInfo", data.adminInfo);
            this.updateDefaultActive();
        },
        updateDefaultActive() {
            this.$nextTick(() => {
                const pathSplit = this.$route.path.split("/");
                this.defaultActive = "/" + pathSplit[1] || "";
            });
        },
        onSelect(item) {
            if (Array.isArray(item.children)) {
                const visit = item.children.find(item => item.path === "visit");
                if (visit) {
                    this.$store.commit(
                        "setButtons",
                        item.children.filter(item => item.path !== "visit")
                    );
                    this.$router.push(item.path);
                } else {
                    this.$message.error("您没有该页面访问权限");
                    this.updateDefaultActive();
                }
            } else {
                this.$message.error("您没有该页面访问权限");
                this.updateDefaultActive();
            }
        }
    }
};
</script>

<style>
.z-nav-menu {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

.z-nav-menu::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.z-nav-menu::-webkit-scrollbar-track {
    border-radius: 0.5rem;
    background: rgba(20, 31, 59, 0.6);
    box-shadow: inset 0 0 0.3rem #20bcfc;
    border: 1px solid #20bcfc;
}

.z-nav-menu::-webkit-scrollbar-thumb {
    background: rgba(27, 223, 252, 0.5);
    border-radius: 0.5rem;
}
</style>

<style lang="scss" scoped>
::v-deep .el-menu-item .el-tooltip {
    display: flex !important;
    align-items: center !important;
}

.btns {
    display: flex;
    justify-content: end;
}
.el-button--success,
.el-button--warning {
    width: 60px !important;
    background: rgba($color: #000000, $alpha: 0);
    border-color: rgba($color: #000000, $alpha: 0);
}
.el-button--success:hover,
.el-button--warning:hover {
    background: rgba($color: #000000, $alpha: 0);
    border-color: rgba($color: #000000, $alpha: 0);
}
.el-button--success:focus,
.el-button--warning:focus {
    background: rgba($color: #000000, $alpha: 0);
    border-color: rgba($color: #000000, $alpha: 0);
}
</style>